<template>
  <div class="prescribe-bt">
    <span class="kaiyao"><van-icon name="arrow-left" @click="$router.push('/home')" /><span class="menzhen"> 开药门诊</span></span>

    <div class="prescribe-bt-top">
      <div class="prescribe-gy">
        <span class="pfgy">凭方购药<img src="./yao_03.jpg" alt="" /></span>
        <br />
        <span class="xuzhi">须持有纸或电子处方</span>
      </div>
      <div class="fulc">
        <span class="fulc-1">服务流程</span><br />
        <p class="fulc-2">第1步:进入商城搜索处方凭证的药品并加入购物车;</p>
        <p class="fulc-3">第2步:选好药品并提交订单进入医生开药界面;</p>
        <p class="fulc-4">
          第3步:回答处方购药合规性问题后，医生对已选购药房开具<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;处方;药师审核通过后,即可在...
        </p>
      </div>
      <div class="di">
        <button @click="$router.push('/yaofang')">立即购药</button>
      </div>
    </div>
    <div class="prescribe-bt-bottom">
      <div class="fz">
        <span class="fz-1">复诊开方<img src="./fuz_03.jpg" alt=""></span>
        <br>
        <span class="fz-2">有本平台问诊开方记录</span>
      </div>
      <div class="fulc2">
         <span class="fu-1">服务流程</span><br />
        <p class="fu-2">第1步:进入商城搜索处方凭证的药品并加入购物车;</p>
        <p class="fu-3">第2步:选好药品并提交订单进入医生开药界面;</p>
        <p class="fu-4">
          第3步:回答处方购药合规性问题后，医生对已选购药房开具<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;处方;药师审核通过后,即可在...
        </p>
      </div>
       <div class="dib">
        <button @click="$router.push('/dizi')">立即购药</button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.prescribe-bt {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  span {
    font-size: 30px;
    height: 40px;
    

    .menzhen {
      margin-left: 36%;
    }
  }
  .prescribe-bt-top {
    width: 90%;
    height: 600px;
    margin-left: 5%;
    background: #ffffff;
    border-radius: 20px;
    margin-top: 40px;
     box-shadow: 0 3px 5px rgba(214, 212, 212, 0.3);
    .prescribe-gy {
      width: 100%;
      height: 30%;
      background: #54ca91;
      border-radius: 20px;
      .pfgy {
        color: #ffffff;
        font-size: 45px;
        margin-left: 20px;
        line-height: 90px;
        font-weight: 700;
        img {
          height: 100%;
          float: right;
          margin-right: 25px;
        }
      }
      .xuzhi {
        color: #ffffff;
        font-size: 25px;
        margin-left: 20px;
      }
    }
    .fulc {
      width: 100%;
      height: 40%;
      // background: greenyellow;
      margin-top: 15px;
      .fulc-1 {
        height: 20px;
        font-size: 35px;
        font-weight: 500;
        margin-left: 20px;
      }
      .fulc-2 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
      .fulc-3 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
      .fulc-4 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
    }
    .di {
      width: 90%;
      height: 15%;
      background: #54ca91;
      margin-left: 5%;
      border-radius: 15px;
      text-align: center;
      margin-top: 40px;
      button {
        background: #54ca91;
        line-height: 90px;
        border: none;
        color: #ffffff;
        font-size: 25px;
        font-weight: 600;
      
      }
    }
  }
  .prescribe-bt-bottom {
    width: 90%;
    height: 600px;
    margin-left: 5%;
    background: #ffffff;
    margin-top: 30px;
    border-radius: 20px;
     box-shadow: 0 3px 5px rgba(214, 212, 212, 0.3);
    .fz{
       width: 100%;
      height: 30%;
      background: #832bfe;
      border-radius: 20px;
          img {
          height: 100%;
          float: right;
          margin-right: 25px;
        }
      
      .fz-1{
        color: #ffffff;
        font-size: 45px;
        margin-left: 20px;
        line-height: 90px;
        font-weight: 700;
      }
      .fz-2{
         color: #ffffff;
        font-size: 25px;
        margin-left: 20px;
      }
    }
     .fulc2 {
      width: 100%;
      height: 40%;
      // background: greenyellow;
      margin-top: 15px;
      .fu-1 {
        height: 20px;
        font-size: 35px;
        font-weight: 500;
        margin-left: 20px;
      }
      .fu-2 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
      .fu-3 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
      .fu-4 {
        height: 20px;
        font-size: 25px;
        color: #999999;
        margin-top: 25px;
        margin-left: 20px;
      }
    }
     .dib {
      width: 90%;
      height: 15%;
      background: #832bfe;
      margin-left: 5%;
      border-radius: 15px;
      text-align: center;
      margin-top: 40px;
      button {
        background: #832bfe;
        line-height: 90px;
        border: none;
        color: #ffffff;
        font-size: 25px;
        font-weight: 600;
      
      }
    }
  }
}
</style>